

<template>
    <div class="maskPanel">
        <section class="verificationView" >
            <p class="title_code">
                <span>请输入验证码</span>
                <i class="icon-close" @click="successChange"></i>
            </p>
            <p class='sended'>我们已发送<strong> 验证码 </strong>到您的手机</p>
            <p class='tel'><strong>{{phoneNum.substr(0,5)}}****{{phoneNum.substr(-2,2)}}</strong></p>
            <code-input :success="success" :code="codeList" ></code-input>
            <p class='callHR'>收不到验证码请联系管理员</p>

        </section>
    </div>
</template>
<script>
import Vue from "vue";
import { Toast} from "mint-ui";
import codeInput from '@/components/public/codeInput'
export default {
  data(){
      return{
          codeList:[]
      }
  },
  components: {
    codeInput
  },
  computed:{

  },
  props:{
    showMask:{
        type:Boolean,
        default:false
    },
    phoneNum:{
        type:String,
        default:''        
    },
    statusChange:{
        type:Function,
        default:() => {}
    },
    successChange:{
        type:Function,
        default:() => {}
    },
    code:{
        type:String,
        default:''
    }

  },
  watch:{

  },
  mounted:function(){

  },
  methods:{
      changeMove:function(e){
          console.log(e);
          e.stopPropagation();

      },
      close:function(){
          console.log('close');
          this.$emit("update:showMask",false)
      },
      success:function(code){

            const params = {
                verificationCode:code
            }
            this.Axios
                .Post(this.URL.verificationCodeMatching.url,params)
                .then((res)=>{
                    
                    this.$emit('update:code',code);

                    var codeNum = res.data.datas;
                    if (codeNum == 10012 ) {
                        this.statusChange('100002')
                    } else {
                        Toast({
                            message: "验证码错误,请重新输入",
                            position: "center",
                            className: "toastStyle",
                            duration: 1000
                        });                
                    }
                })
      },
      getInput:function(code){
          console.log(code,this.code)
      }
  }
}
</script>
<style scoped>
    .maskPanel{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background-color: #7E7E7E;
        z-index:1000;
    }
 .verificationView{
    overflow: hidden;
    background-color:#fff;
    position: absolute;;
    bottom:0px;
    margin:auto auto;
    top:0px;
    height:4rem;
    width:90%;
    left:0;
    right:0;
    border-radius: 0.08rem;
    text-align:center;
}
.verificationView p.tel {
    color: #262626;
}

.verificationView div.verification {
    padding: 0.5rem 0;
}
.verificationView p.sended {
    letter-spacing: 0.02rem;
    height:0.6rem;
    line-height: 0.6rem;
}
.verificationView p.sended strong {
    color: #262626;
}

.verificationView p.callHR {
    color: rgb(148, 142, 142);
    height: 0.8rem;
    line-height: 0.8rem;
}
.verificationView .title_code{
    height: 1rem;
    line-height: 1rem;
    position: relative;
}
.verificationView .title_code i{
    position: absolute;
    right:0.3rem;
    top:0.34rem;
    font-size:0.32rem;
    color: rgb(148, 142, 142);
}
</style>

             
             
             
             
